<template>
	<view>
		{{orderby}}
		<van-dropdown-menu>
			<van-dropdown-item @change="handleChangeCity" :value="city" :options="cityList" />
			<van-dropdown-item @change="handleChangeType" :value="type" :options="typeList" />
			<van-dropdown-item :value="value2" :options="option2" />
			<van-dropdown-item @change="handleChangeSort" :value="value3" :options="option3" />
		</van-dropdown-menu>
		<unicloud-db ref="udb" :orderby="orderby" :where="where" collection="goodList"
			v-slot:default="{ data, loading, error }">
			<view v-if="error">请求报错： {{error}}</view>
			<view v-else>
				<view @click="toDetail(item)" class="list-item" v-for="(item, index)  in data" :key="index">
					<image :src="item.image" mode=""></image>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="city">城市：{{item.city}}</view>
						<view class="disCount">患者： {{item.disCount}}</view>
						<view class="type">科室: {{item.type}}</view>
						<view class="score">评分: {{item.score}}</view>
					</view>
				</view>
			</view>
			<view v-if="loading">数据加载中...</view>
		</unicloud-db>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	const udb = ref()
	const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?_id=${item._id}`
		})
	}
	const getCity = async () => {

		const resp = await uniCloud.callFunction({
			name: 'getChinaCity',
		})
		cityList.value = cityList.value.concat(resp.result.data.map(v => ({
			text: v.name,
			value: v.name
		})))
	}

	const handleChangeCity = (e) => {
		city.value = e.detail;

		setTimeout(() => {
			udb.value.loadData({
				clear: true
			})
		})
	}
	const where = computed(() => {
		const arr = []
		if (city.value !== '城市') {
			arr.push(`city=='${city.value}'`)
		}


		if (type.value !== '科室') {
			arr.push(`type=='${type.value}'`)
		}
		console.log(arr.join('&&'))
		return arr.join('&&')
	})
	const city = ref('城市')
	const cityList = ref([{
		text: '城市',
		value: "城市"
	}])
	const handleChangeType = (e) => {
		type.value = e.detail;

		setTimeout(() => {
			udb.value.loadData({
				clear: true
			})
		})
	}
	const type = ref('科室')
	const typeList = [{
		text: '科室',
		value: '科室'
	}, {
		text: '男科',
		value: '男科'
	}, {
		text: '妇科',
		value: '妇科'
	}, {
		text: '儿科',
		value: '儿科'
	}, {
		text: '内科',
		value: '内科'
	}, {
		text: '外壳',
		value: '外壳'
	}, {
		text: '骨科',
		value: '骨科'
	}, {
		text: '口腔科',
		value: '口腔科'
	}, {
		text: '急诊',
		value: '急诊'
	}, ]


	const option2 = [{
			text: '筛选',
			value: ''
		},
		{
			text: '好评排序',
			value: 'score desc'
		},
		{
			text: '销量排序',
			value: 'disCount desc'
		},
	]

	const handleChangeSort = (e) => {
		orderby.value = e.detail;
		setTimeout(() => {
			udb.value.loadData({
				clear: true
			})
		})

	}
	const orderby = ref('')
	const option3 = [{
			text: '排序',
			value: 'a'
		},
		{
			text: '好评排序',
			value: 'score desc'
		},
		{
			text: '销量排序',
			value: 'disCount desc'
		},
	]


	const value2 = 'a'
	const value3 = 'a'
	onReachBottom(() => {
		udb.value.loadMore();
	})

	getCity()
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;

		image {
			width: 300rpx;
			height: 300rpx;
			flex-shrink: 0;
		}

	}
</style>